<template>

<div class="productList">
  <ul >
    <li v-for="p in pList" @click="toProductDetail(p)">
      <img :src="baseUrl+'images/'+p.url" alt="">
      <div class="info" style="width: 100%;margin-bottom: 0">
        <div class="price">¥{{p.price}}</div>
        <div class="title">{{p.title}}</div>
      </div>
    </li>
  </ul>
</div>

</template>

<script>
export default {
  name: "productShow",
  data(){
    return{
      pList:[
        {price:12, title:'temp'}
      ],
      // 这里的baseUrl 在mounted()进行了赋值 见main.js具体变量值
      baseUrl:''

    }
  },
  methods:{
    toProductDetail(product){
     // console.log(product);
      this.$store.commit('SetPid',product.pid);
      this.$router.push('/product/detail');


    },
    showProductList(){
      this.axios.get(this.$M_URL+'product/getAll').then((res)=>{
        //TODO 显示全部商品的异常处理
        this.pList=res.data.data;
      })
    }
  },
  mounted() {
    this.baseUrl=this.$M_URL;
    this.showProductList();
  }
}
</script>

<style scoped>
.productList{
  width: 1000px;
  margin: 0 auto;
}
.productList ul{
  display: flex;
  flex-wrap: wrap;

}
.productList ul li img{
  width: 248px;
  height: 248px;
  display: block;
  box-sizing: border-box;
}
.info{
  height: 40px;
  width: 228px;
  text-align: left;
  padding: 0 5px;
}
.price{
  height: 24px;
  line-height: 24px;

  overflow: hidden;
  white-space: nowrap;
  color: #666666;
  font-size: 20px;
}
.title{
  height: 16px;
  line-height: 16px;
  width: 228px;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  color: #CCCCCC;
  font-size: 12px;
}
.productList ul li {
  cursor: pointer;
  box-sizing: border-box;
  width: 250px;
  height: 303px;
  /*background-color: #F4D720;*/
  border: 1px solid #E6E6E6;
  transition: all .3s ease-in-out;

}

.productList ul li:hover{
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  transform: translate3d(0, -5px, 0);
}
</style>